<template>
  <div class="bk_info" style="padding: 15px">
    <div class="title">
      填写报卡-{{ name }}
      <span style="float: right">
        <el-button size="small" @click="to_up">返回</el-button>
        <el-button size="small" type="primary" @click="btn_yes">保存</el-button>
        <el-button size="small" type="primary">保存并提交</el-button>
      </span>
    </div>
    <el-tabs>
      <el-tab-pane label="报卡信息">
        <p style="font-weight: 700; font-size: 16px; color: #000">报卡信息</p>
        <el-row>
          <el-col :span="12" style="padding: 5px 10px">
            <el-divider content-position="left">基本信息</el-divider>
            <el-form ref="form" label-width="160px">
              <el-form-item label="门诊号：">
                <el-input
                  style="width: 300px"
                  size="small"
                  v-model="info.mzh"
                ></el-input>
              </el-form-item>
              <el-form-item label="住院号：">
                <el-input
                  style="width: 300px"
                  size="small"
                  v-model="info.zyh"
                ></el-input>
              </el-form-item>
              <el-form-item label="姓名：">
                <el-input
                  style="width: 300px"
                  size="small"
                  v-model="info.pName"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：">
                <el-radio-group v-model="info.xb" size="small">
                  <el-radio-button label="男"></el-radio-button>
                  <el-radio-button label="女"></el-radio-button>
                  <el-radio-button label="未说明的性别"></el-radio-button>
                  <el-radio-button label="未知的性别"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="民族：">
                <!-- <el-select
                  v-model="info.value"
                  style="width: 300px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="测试数据" value="测试数据"> </el-option>
                </el-select> -->
                <el-input
                  style="width: 300px"
                  size="small"
                  v-model="info.minzu"
                ></el-input>
              </el-form-item>
              <el-form-item label="国籍：">
                <el-select
                  v-model="info.guoji"
                  style="width: 300px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="中国" value="中国"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="证件类别：">
                <el-select
                  v-model="info.zjlb"
                  style="width: 300px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="身份证" value="身份证"> </el-option>
                  <el-option label="出生证" value="出生证"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="证件号码：">
                <el-input
                  style="width: 300px"
                  size="small"
                  v-model="info.idCard"
                ></el-input>
              </el-form-item>
              <el-form-item label="出生日期：">
                <el-date-picker
                  v-model="info.csrq"
                  size="small"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="本人电话：">
                <el-input
                  placeholder="请输入内容"
                  size="small"
                  style="width: 300px"
                  v-model="info.brdh"
                >
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
              <el-form-item label="医保类型：">
                <el-select
                  v-model="info.yb_type"
                  style="width: 300px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="城乡居民医保" value="城乡居民医保">
                  </el-option>
                  <el-option label="职工医保" value="职工医保"> </el-option>
                  <el-option label="商业保险" value="商业保险"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="先住址居住6个月以上">
                <el-radio-group v-model="info.jz_6" size="small">
                  <el-radio-button label="是"></el-radio-button>
                  <el-radio-button label="否"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="现住地址：">
                <el-input
                  style="width: 500px"
                  size="small"
                  v-model="info.xzdz"
                ></el-input>
              </el-form-item>
              <el-form-item label="户籍地址：">
                <el-input
                  style="width: 500px"
                  size="small"
                  v-model="info.hjdz"
                ></el-input>
              </el-form-item>
              <el-form-item label="文化程度：">
                <!-- <el-select
                  v-model="info.value"
                  style="width: 300px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="测试数据" value="测试数据"> </el-option>
                </el-select> -->
                <el-input
                  style="width: 500px"
                  size="small"
                  v-model="info.whcd"
                ></el-input>
              </el-form-item>
              <el-form-item label="工作单位：">
                <el-input
                  style="width: 300px"
                  size="small"
                  v-model="info.gzdw"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系人：">
                <el-input
                  style="width: 300px"
                  size="small"
                  v-model="info.lxr"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系人电话：">
                <el-input
                  placeholder="请输入内容"
                  size="small"
                  style="width: 300px"
                  v-model="info.lxrdh"
                >
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
              <el-form-item label="与患者关系：">
                <!-- <el-select
                  v-model="info.yhzgx"
                  style="width: 300px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="测试数据" value="测试数据"> </el-option>
                </el-select> -->
                <el-input
                  style="width: 300px"
                  size="small"
                  v-model="info.yhzgx"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注：">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  placeholder="请输入内容"
                  v-model="info.beizhu"
                  size="small"
                  style="width: 500px"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="婚姻状况">
                <el-radio-group v-model="info.hyzk" size="small">
                  <el-radio-button label="未婚"></el-radio-button>
                  <el-radio-button label="已婚/再婚/同居"></el-radio-button>
                  <el-radio-button label="分居"></el-radio-button>
                  <el-radio-button label="离异"></el-radio-button>
                  <el-radio-button label="丧偶"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="职业：">
                <!-- <el-select
                  v-model="info.value"
                  style="width: 300px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="测试数据" value="测试数据"> </el-option>
                </el-select> -->
                <el-input
                  style="width: 300px"
                  size="small"
                  v-model="info.zhiye"
                ></el-input>
              </el-form-item>
              <el-divider content-position="left">患病信息</el-divider>
              <el-form-item label="治疗措施：">
                <el-checkbox-group v-model="info.zlcs">
                  <el-checkbox label="PTCA"></el-checkbox>
                  <el-checkbox label="支架植入"></el-checkbox>
                  <el-checkbox label="CABG"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="发病日期：">
                <el-date-picker
                  v-model="info.fbrq"
                  size="small"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="首次发病">
                <el-radio-group v-model="info.scfb" size="small">
                  <el-radio-button label="是"></el-radio-button>
                  <el-radio-button label="否"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="诊断日期：">
                <el-date-picker
                  v-model="info.zdrq"
                  size="small"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="ICD码：">
                <el-input
                  placeholder="请输入内容"
                  size="small"
                  style="width: 500px"
                  v-model="info.icd_num"
                >
                  <template slot="prepend">ICD-10</template>
                </el-input>
                <el-input
                  placeholder="请输入内容"
                  size="small"
                  style="width: 500px"
                  v-model="info.yb_icd"
                >
                  <template slot="prepend">医保2.0版</template>
                </el-input>
              </el-form-item>
              <el-form-item label="诊断依据（可多选）：">
                <el-checkbox-group v-model="info.zdyj">
                  <el-checkbox label="临床症状"></el-checkbox><br />
                  <el-checkbox label="肌钙蛋白"></el-checkbox><br />
                  <el-checkbox label="心电图"></el-checkbox><br />
                  <el-checkbox label="血管造影"></el-checkbox><br />
                  <el-checkbox label="超声心动图"></el-checkbox><br />
                  <el-checkbox label="CT/CTA/SPECT"></el-checkbox><br />
                  <el-checkbox label="MRI"></el-checkbox><br />
                  <el-checkbox label="腰穿"></el-checkbox><br />
                  <el-checkbox label="手术"></el-checkbox><br />
                  <el-checkbox label="尸检或病理"></el-checkbox><br />
                  <el-checkbox label="补发"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="其他生化指标：">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 6 }"
                  placeholder="请输入内容"
                  v-model="info.qtshzb"
                  size="small"
                  style="width: 500px"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="出院记录（小结）：">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 6 }"
                  placeholder="请输入内容"
                  v-model="info.cyjl"
                  size="small"
                  style="width: 500px"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="诊断机构名称：">
                <el-select
                  v-model="info.zdjgmc"
                  style="width: 300px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="测试数据" value="测试数据"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="诊断机构级别：">
                <el-radio-group v-model="info.zdjgjb" size="small">
                  <el-radio-button label="一级"></el-radio-button>
                  <el-radio-button label="二级"></el-radio-button>
                  <el-radio-button label="三级"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="转归：">
                <el-radio-group v-model="info.zhuangui" size="small">
                  <el-radio-button label="存活"></el-radio-button>
                  <el-radio-button label="死亡"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="报卡单位：">
                <el-select
                  v-model="info.bkdw"
                  style="width: 300px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="测试数据" value="测试数据"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="报告医生：">
                <el-input
                  placeholder="请输入内容"
                  size="small"
                  style="width: 500px"
                  v-model="info.bgys"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="报告日期：">
                <el-date-picker
                  v-model="info.bgrq"
                  size="small"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" style="padding: 5px 10px">
            <el-divider content-position="left"
              >居民健康档案参考信息</el-divider
            >
            <div class="ckxx">
              <p>
                <span
                  style="
                    display: inline-block;
                    width: 15%;
                    font-size: 20px;
                    font-weight: 900;
                    color: #000;
                  "
                  >测试</span
                >
                女 22岁 不详不便分类的其他从业人员
              </p>
              <p>
                <span style="display: inline-block; width: 15%">出生日期</span>
                2001-01-21
              </p>
              <p>
                <span style="display: inline-block; width: 15%">证件类型</span>
                无证件
              </p>
              <p>
                <span style="display: inline-block; width: 15%">证件号码</span>
                1
              </p>
              <p>
                <span style="display: inline-block; width: 15%">本人电话</span>
                18608819570
              </p>
              <p>
                <span style="display: inline-block; width: 15%"
                  >联系人姓名</span
                >
                1
              </p>
              <p>
                <span style="display: inline-block; width: 15%"
                  >联系人电话</span
                >
                18608819570
              </p>
              <p>
                <span style="display: inline-block; width: 15%">常住类型</span>
                -
              </p>
              <p>
                <span style="display: inline-block; width: 15%">民族</span>
                苗族
              </p>
              <p>
                <span style="display: inline-block; width: 15%">户籍地址</span>
                云南省/普洱市/澜沧拉祜族自治县/糯扎渡镇/谦迈村民委员会/芦洼组
              </p>
              <p>
                <span style="display: inline-block; width: 15%">现住址</span>
                云南省/西双版纳傣族自治州/勐海县/勐海镇/象山社区居民委员会/1
              </p>
              <p>
                <span style="display: inline-block; width: 15%">工作单位</span>
                -
              </p>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="操作记录">
        <el-timeline>
          <el-timeline-item
            color="rgb(46,160,254)"
            timestamp=""
            placement="top"
          >
            <el-card>
              <p style="margin-bottom: 0">暂无记录</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      name: "",
      info: {
        mzh: "", // 门诊号
        zyh: "", // 住院号
        pName: "", // 姓名
        xb: "", // 性别
        minzu: "", // 民族
        guoji: "中国", // 国籍
        zjlb: "身份证", // 证件类别
        idCard: "", // 证件号码
        csrq: "", // 出生日期
        brdh: "", // 本人电话
        yb_type: "", // 医保类型
        jz_6: "", // 先住址居住6个月以上
        xzdz: "", // 现住地址
        hjdz: "", // 户籍地址
        whcd: "", // 文化程度
        gzdw: "", // 工作单位
        lxr: "", // 联系人
        lxrdh: "", // 联系人电话
        yhzgx: "", // 与患者关系
        beizhu: "", // 备注
        hyzk: "", // 婚姻状
        zhiye: "", // 职业
        // 患病信息
        zlcs: [], // 治疗措施
        fbrq: "", // 发病日期
        scfb: "", // 首次发病
        zdrq: "", // 诊断日期
        icd_num: "", // ICD码
        yb_icd: "", // 医保2.0版
        zdyj: [], // 诊断依据
        qtshzb: "", // 其他生化指标
        cyjl: "", // 出院记录（小结）
        zdjgmc: "", // 诊断机构名称
        zdjgjb: "", // 诊断机构级别
        zhuangui: "", //转归
        bkdw: "", //报卡单位
        bgys: "", //报告医生
        bgrq: "", //报告日期
      },
    };
  },
  mounted() {
    this.name = this.$route.query.name;
  },
  methods: {
    to_up() {
      this.$router.push("/BKXT/add/addCard");
    },
    btn_yes() {
      var init = JSON.stringify(this.info);
      var body = JSON.parse(init);
      body.zlcs = body.zlcs.join(",");
      body.zdyj = body.zdyj.join(",");
    },
  },
};
</script>
  
  <style scoped lang="scss">
.bk_info {
  background-color: #fff;
  height: calc(100vh - 46px);
  overflow: auto;
  .title {
    font-size: 24px;
    font-weight: 900;
    color: #000;
    padding: 20px;
    border: 1px solid #ccc;
  }
}
.el-form-item {
  margin-bottom: 5px;
}
.ckxx {
  background-color: rgb(238, 238, 238);
  border: 1px solid #ccc;
  padding: 35px;
  border-radius: 5px;
}
</style>